<template>
  <div class="courseDetail">
    <courseHeadInfo :courseInfo="courseInfo" />
    <div class="main">
      <div class="selectBox">
       
        <el-select v-model="selectedCurrNo" placeholder="查看本门课所开设的课程" @change="handleChange">
          <el-option :key="0" label="选择查看开设情况" value="0">
          </el-option>
          <el-option v-for="item in currCourseList" :key="item.currNo" :label="item.showName" :value="item.currNo">
          </el-option>
        </el-select> <span style="font-weight: bolder;margin-left: 7px;">  已开设 {{ currCourseList.length}} 期</span>
      </div>
      <tasks :courseInfo="courseInfo" :courseData="{}" :unShowGroupIcon="unShowGroupIcon" :learnGroupIndex="'0-0'" />
    </div>
  </div>
</template>

<script>
import courseHeadInfo from "@/components/teacherPage/courseHeadInfo/courseHeadInfo";
import tasks from "@/views/courses/detail/task_N/task_N";
import { getCourseDetail, getCurriculumCourse, getCurriculumCourseList } from "@/request/courses";
import { formatCourseGroupTaskObj } from "@/util/courseData";
import { mapState } from "vuex";
export default {
  components: {
    courseHeadInfo,
    tasks,
  },
  data() {
    return {
      courseInfo: {},
      taskSettings: null,
      selectedCurrNo: "0",
      currCourseList: []
    };
  },
  computed: {
    ...mapState({
    }),
  },
  props: {
    courseID: Number,
    unShowGroupIcon: Boolean,
    courseUnOpen: Boolean,
  },
  created() {
    const courseID = this.courseID;
    this.fetchCoursesDeital({ id: courseID });
    this.fetchCurriculumCourseList({ courseID })
  },
  methods: {
    // 获取课程详情
    async fetchCoursesDeital(params) {
      return new Promise((resolve, reject) => {
        if (!this.courseUnOpen) {
          const getCourseDetailInfo = getCourseDetail(params);
          const getCurriculumCourseInfo = getCurriculumCourse({
            id: this.$route.query.currNo,
          });
          Promise.all([getCourseDetailInfo, getCurriculumCourseInfo]).then(
            (res) => {
              if (res[1].errno === 0 && res[0].errno === 0) {
                let currName = res[1].data.name;
                res[0].data.taskSettings = res[1].data.taskSettings;
                currName = currName.substring(
                  0,
                  currName.lastIndexOf("_") == -1
                    ? currName.length
                    : currName.lastIndexOf("_")
                );
                res[0].data["currNo"] = res[1].data.currNo;
                res[0].data.currName = currName;
                res[0].data.currDesc = res[1].data.currDesc;
                res[0].data.tutorStaffUserName = res[1].data.tutorStaffUserName;
                formatCourseGroupTaskObj(res.data, this);
                this.courseInfo = res[0].data;
              } else {
                this.$antdMessage.error({
                  content: "获取课程信息失败，请刷新页面！",
                });
              }
            }
          );
        } else {
          getCourseDetail(params).then((res) => {
            if (res.errno === 0) {
              formatCourseGroupTaskObj(res.data, this);
              this.courseInfo = res.data;
            } else {
              this.$antdMessage.error({
                content: "获取课程信息失败，请刷新页面！",
              });
            }
          });
        }
      });
    },
    // 获取这门课所开设的课程
    fetchCurriculumCourseList(options) {
      getCurriculumCourseList(options).then(res => {
        this.currCourseList = res
      })
    },
    // 选择查看的课程
    handleChange(selectedCurrNo) {
      if (selectedCurrNo) {
        this.$router.push({
          name: "Curr",
          params: {
            id: selectedCurrNo,
          },
        });
      }

    },
  },
};
</script>

<style lang="stylus">
.courseDetail {
  .selectBox {
    margin-top: 10px;
    font-size: 16px
  }
  .main {
    margin: 0 auto;
    max-width: 1200px;

    .courseTask {
      padding-top: 0;

      .rankingList {
        display: none;
      }

      .introduction {
        display: none;
      }

      .taskForce {
        max-width: 100%;

        .el-collapse {
          .el-collapse-item {
            .el-collapse-item__content {
              .task-content {
                .el-collapse-item {
                  .el-collapse-item__header {
                    min-height: 27px;
                  }

                  .is-disabled {
                    .el-textarea__inner {
                      cursor: default !important;
                      background: #fff !important;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
